<template>
  <div id="meetingRoomm2" v-loading="loading">
    <div class="cancelPop" v-if="dialogVisible" :style="cancelPopStyle">
      <p class="title">确定取消排座?</p>
      <p>
        <span class="bt2" @click="comfirmClick">确定</span
        ><span class="bt1" @click="dialogVisible = false">取消</span>
      </p>
    </div>
     <div
      class="reserveSeatlPop"
      v-if="reserveSeatVisible"
      :style="reserveSeatStyle"
    >
      <p class="title">确定占位?</p>
      <p>
        <span class="bt2" @click="reserveSeatcomfirmClick()">确定</span
        ><span class="bt1" @click="reserveSeatVisible = false">取消</span>
      </p>
    </div>
    <div class="memberList">
      <p class="title">报名人员</p>
      <div class="listTree">
        <el-tree
        v-if="members.length>0"
          show-checkbox
          class="filter-tree"
          :data="members"
          node-key="id"
          :props="defaultProps"
          @check-change="handleCheckChange"
          ref="tree"
          :key="treeKey"
        >
        </el-tree>
      </div>
    </div>
    <div
      class="main"
      ref="main"
      @mousedown="startSelection"
      @mouseup="endSelection"
      @mousemove="updateSelection"
    >
      <p class="title">市行政中心16楼中庭会议室</p>
      <div
        class="selection-box"
        v-if="isSelecting"
        :style="selectionBoxStyle"
      ></div>
      <div class="content">
        <div class="left">
          <div class="left_top">
            <div
              v-for="(item, index) in seatData.slice(0, 24)"
              :key="index"
              :id="item.id"
              class="seat"
              :class="item.selected ? 'selected' : ''"
              @contextmenu.prevent="
                item.state == 1 ? selecteCell($event, index, item)  : item.id !== ''  ? reserveSeat($event,index, item) :''
              "
            >
              {{ item.member != null ? item.member.name : item.id }}
            </div>
          </div>
          <div class="left_center"><span>过</span><span>道</span></div>
          <div class="left_bottom">
            <div
              v-for="(item, index) in seatData.slice(48, 72)"
              :key="index"
              :id="item.id"
              class="seat"
              :class="item.selected ? 'selected' : ''"
              @contextmenu.prevent="
                item.state == 1 ? selecteCell($event, 48 + index, item)
                : item.id !== ''  ? reserveSeat($event, 48 + index, item) :''
              "
            >
              {{ item.member != null ? item.member.name : item.id }}
            </div>
          </div>
        </div>
        <div class="center">
          <div class="aisle"><span>过</span><span>道</span></div>
          <div class="innerRingBox">
            <div class="innerRingBoxTop">
              <div class="innerRing"><span>内</span><span>圈</span></div>
            </div>
            <div class="innerRingBoxBottom">电子屏</div>
          </div>
          <div class="aisle"><span>过</span><span>道</span></div>
        </div>
        <div class="right">
          <div class="right_top">
            <div
              v-for="(item, index) in seatData.slice(24, 48)"
              :key="index"
              :id="item.id"
              class="seat"
              :class="item.selected ? 'selected' : ''"
              @contextmenu.prevent="
                item.state == 1 ? selecteCell($event, 24 + index, item)
                 : item.id !== ''  ? reserveSeat($event, 24 + index, item) :''
              "
            >
              {{ item.member != null ? item.member.name : item.id }}
            </div>
          </div>
          <div class="right_center"><span>过</span><span>道</span></div>
          <div class="right_bottom">
            <div
              v-for="(item, index) in seatData.slice(72, 96)"
              :key="index"
              :id="item.id"
              class="seat"
              :class="item.selected ? 'selected' : ''"
              @contextmenu.prevent="
                item.state == 1 ? selecteCell($event, 72 + index, item)
                 : item.id !== ''  ? reserveSeat($event, 72 + index, item) :''
              "
            >
              {{ item.member != null ? item.member.name : item.id }}
            </div>
          </div>
        </div>
      </div>
    </div>
     <div class="operateDiv">
      <!-- <el-input
        :title="meetingTitle"
        v-model="meetingTitle"
        placeholder="请输入会议标题"
      ></el-input> -->
      <span class="rowSeat" @click="rowSeat()">排座</span>
      <span class="saveAsImage" @click="saveAsImage">保存图片</span>
      <span class="printInfo" @click="print">打印</span>
      <span class="sellectAll" v-if="sellectAllSeat" @click="sellectAll">全选座位</span>
      <span
        v-if="selecteCells.length > 0"
        class="reserveSeatMore"
        @click="reserveSeatMore"
        >占座</span
      >
      <span class="saveInfo" @click="saveInfo">保存座位表</span>
      <!-- <span class="cancelRowSeat" @click="cancelRowSeat()">取消排座</span> -->
    </div>
  </div>
</template>

<script>
// 引入 html2canvas
import html2canvas from "html2canvas";
import {
  getDeptMember,
  saveOrUpdateRowSeat,
  findRowSeatByMeetingId,
} from "@/apis/common.js";
export default {
   props: {
    type:{
      type: String,
      default: ""
    }
  },
  data() {
    return {
      sellectAllSeat: true,//座位全选
      loading: true,//加载状态
      treeKey:0,//渲染人员树
      id: "", //用来判断是否是新增或编辑
      // meetingTitle: "",//会议标题
      meetingId: "", //会议id
      members: [
        {
          id: "1",
          name: "研发部",
          memberList: [
            { id: "-1", name: "人员1" },
            { id: "-2", name: "人员2" },
            { id: "-3", name: "人员3" },
            { id: "-4", name: "人员4" },
            { id: "-5", name: "人员5" },
            { id: "-6", name: "人员6" },
            { id: "-7", name: "人员3" },
            { id: "-8", name: "人员4" },
            { id: "-9", name: "人员5" },
            { id: "-10", name: "人员6" },
            { id: "-11", name: "人员3" },
            { id: "-12", name: "人员4" },
            { id: "-13", name: "人员5" },
            { id: "-14", name: "人员6" },
            { id: "-15", name: "人员3" },
            { id: "-16", name: "人员4" },
            { id: "-17", name: "人员5" },
            { id: "-18", name: "人员6" },
            { id: "-19", name: "人员3" },
            { id: "-20", name: "人员4" },
            { id: "-21", name: "人员5" },
            { id: "-22", name: "人员6" },
            { id: "-23", name: "人员3" },
            { id: "-24", name: "人员4" },
            { id: "-25", name: "人员5" },
            { id: "-26", name: "人员6" },
            { id: "-27", name: "人员3" },
            { id: "-28", name: "人员4" },
            { id: "-29", name: "人员5" },
            { id: "-30", name: "人员6" },
            { id: "-31", name: "人员3" },
            { id: "-32", name: "人员4" },
            { id: "-33", name: "人员5" },
            { id: "-34", name: "人员6" },
            { id: "-35", name: "人员3" },
            { id: "-36", name: "人员4" },
            { id: "-37", name: "人员5" },
            { id: "-38", name: "人员6" },
            { id: "-39", name: "人员3" },
            { id: "-40", name: "人员4" },
            { id: "-41", name: "人员5" },
            { id: "-42", name: "人员6" },
            { id: "-43", name: "人员3" },
            { id: "-44", name: "人员4" },
            { id: "-45", name: "人员5" },
            { id: "-46", name: "人员6" },
            { id: "-47", name: "人员3" },
            { id: "-48", name: "人员4" },
            { id: "-49", name: "人员5" },
            { id: "-50", name: "人员6" },
            { id: "-51", name: "人员3" },
            { id: "-52", name: "人员4" },
            { id: "-53", name: "人员5" },
            { id: "-54", name: "人员6" },
            { id: "-55", name: "人员3" },
          ],
        },
        {
          id: "3",
          name: "研发部",
          memberList: [
            { id: "-1", name: "人员1" },
            { id: "-2", name: "人员2" },
            { id: "-3", name: "人员3" },
            { id: "-4", name: "人员4" },
            { id: "-5", name: "人员5" },
            { id: "-6", name: "人员6" },
            { id: "-7", name: "人员3" },
            { id: "-8", name: "人员4" },
            { id: "-9", name: "人员5" },
            { id: "-10", name: "人员6" },
            { id: "-11", name: "人员3" },
            { id: "-12", name: "人员4" },
            { id: "-13", name: "人员5" },
            { id: "-14", name: "人员6" },
            { id: "-15", name: "人员3" },
            { id: "-16", name: "人员4" },
            { id: "-17", name: "人员5" },
            { id: "-18", name: "人员6" },
            { id: "-19", name: "人员3" },
            { id: "-20", name: "人员4" },
            { id: "-21", name: "人员5" },
            { id: "-22", name: "人员6" },
            { id: "-23", name: "人员3" },
            { id: "-24", name: "人员4" },
            { id: "-25", name: "人员5" },
            { id: "-26", name: "人员6" },
            { id: "-27", name: "人员3" },
            { id: "-28", name: "人员4" },
            { id: "-29", name: "人员5" },
            { id: "-30", name: "人员6" },
            { id: "-31", name: "人员3" },
            { id: "-32", name: "人员4" },
            { id: "-33", name: "人员5" },
            { id: "-34", name: "人员6" },
            { id: "-35", name: "人员3" },
            { id: "-36", name: "人员4" },
            { id: "-37", name: "人员5" },
            { id: "-38", name: "人员6" },
            { id: "-39", name: "人员3" },
            { id: "-40", name: "人员4" },
            { id: "-41", name: "人员5" },
            { id: "-42", name: "人员6" },
            { id: "-43", name: "人员3" },
            { id: "-44", name: "人员4" },
            { id: "-45", name: "人员5" },
            { id: "-46", name: "人员6" },
            { id: "-47", name: "人员3" },
            { id: "-48", name: "人员4" },
            { id: "-49", name: "人员5" },
            { id: "-50", name: "人员6" },
            { id: "-51", name: "人员3" },
            { id: "-52", name: "人员4" },
            { id: "-53", name: "人员5" },
            { id: "-54", name: "人员6" },
            { id: "-55", name: "人员3" },
          ],
        },
        {
          id: "2",
          name: "测试部",
          memberList: [
            { id: "-5778907771624733075", name: "人员1" },
            { id: "-5778907771624733076", name: "人员2" },
            { id: "-5778907771624733077", name: "人员3" },
            { id: "-5778907771624733078", name: "人员4" },
            { id: "-5778907771624733079", name: "人员5" },
            { id: "-5778907771624733074", name: "人员6" },
          ],
        },
      ], // 报名的人员列表
      defaultProps: {
        children: "memberList",
        label: "name" || "deptName",
      },
      seatDataMember: [], // 已排座人员
      selectedMember: [], // 选中的成员
      seatData: [
        { member: null, id: "95", state: 0, selected: false },
        { member: null, id: "93", state: 0, selected: false },
        { member: null, id: "91", state: 0, selected: false },
        {
          member: { id: "-1", name: "纪委" },
          id: "89",
          state: 1,
          selected: false,
        },
        { member: null, id: "87", state: 0, selected: false },
        { member: null, id: "85", state: 0, selected: false },
        { member: null, id: "83", state: 0, selected: false },
        {
          member: { id: "-1", name: "组织部" },
          id: "81",
          state: 1,
          selected: false,
        },
        { member: null, id: "79", state: 0, selected: false },
        { member: null, id: "77", state: 0, selected: false },
        { member: null, id: "75", state: 0, selected: false },
        {
          member: { id: "-1", name: "宣传部" },
          id: "73",
          state: 1,
          selected: false,
        },
        { member: null, id: "71", state: 0, selected: false },
        { member: null, id: "69", state: 0, selected: false },
        { member: null, id: "67", state: 0, selected: false },
        {
          member: { id: "-1", name: "政法委" },
          id: "65",
          state: 1,
          selected: false,
        },
        { member: null, id: "63", state: 0, selected: false },
        { member: null, id: "61", state: 0, selected: false },
        { member: null, id: "59", state: 0, selected: false },
        {
          member: { id: "-1", name: "盐阜大众报社" },
          id: "57",
          state: 1,
          selected: false,
        },
        { member: null, id: "55", state: 0, selected: false },
        { member: null, id: "53", state: 0, selected: false },
        { member: null, id: "51", state: 0, selected: false },
        {
          member: { id: "-1", name: "广电总台" },
          id: "49",
          state: 1,
          selected: false,
        },

        { member: null, id: "96", state: 0, selected: false },
        { member: null, id: "94", state: 0, selected: false },
        {
          member:null,
          id: "92",
          state: 0,
          selected: false,
        },
        {
          member: null,
          id: "90",
          state: 0,
          selected: false,
        },
        { member: null, id: "88", state: 0, selected: false },
        { member: null, id: "86", state: 0, selected: false },
        {
          member: null,
          id: "84",
          state: 0,
          selected: false,
        },
        {
          member:null,
          id: "82",
          state: 0,
          selected: false,
        },
        { member: null, id: "80", state: 0, selected: false },
        { member: null, id: "78", state: 0, selected: false },
        {
          member: null,
          id: "76",
          state: 0,
          selected: false,
        },
        {
          member:null,
          id: "74",
          state: 0,
          selected: false,
        },
        { member: null, id: "72", state: 0, selected: false },
        { member: null, id: "70", state: 0, selected: false },
        { member: null, id: "68", state: 0, selected: false },
        {
          member: null,
          id: "66",
          state: 0,
          selected: false,
        },
        { member: null, id: "64", state: 0, selected: false },
        { member: null, id: "62", state: 0, selected: false },
        { member: null, id: "60", state: 0, selected: false },
        { member: null, id: "58", state: 0, selected: false },
        { member: null, id: "56", state: 0, selected: false },
        { member: null, id: "54", state: 0, selected: false },
        { member: null, id: "52", state: 0, selected: false },
        { member: null, id: "50", state: 0, selected: false },

        { member: null, id: "47", state: 0, selected: false },
        { member: null, id: "45", state: 0, selected: false },
        { member: null, id: "43", state: 0, selected: false },
        { member: null, id: "41", state: 0, selected: false },
        { member: null, id: "39", state: 0, selected: false },
        { member: null, id: "37", state: 0, selected: false },
        { member: null, id: "35", state: 0, selected: false },
        { member: null, id: "33", state: 0, selected: false },
        { member: null, id: "31", state: 0, selected: false },
        { member: null, id: "29", state: 0, selected: false },
        { member: null, id: "27", state: 0, selected: false },
        { member: null, id: "25", state: 0, selected: false },
        { member: null, id: "23", state: 0, selected: false },
        { member: null, id: "21", state: 0, selected: false },
        { member: null, id: "19", state: 0, selected: false },
        { member: null, id: "17", state: 0, selected: false },
        { member: null, id: "15", state: 0, selected: false },
        { member: null, id: "13", state: 0, selected: false },
        { member: null, id: "11", state: 0, selected: false },
        { member: null, id: "9", state: 0, selected: false },
        { member: null, id: "7", state: 0, selected: false },
        { member: null, id: "5", state: 0, selected: false },
        { member: null, id: "3", state: 0, selected: false },
        { member: null, id: "1", state: 0, selected: false },

        { member: null, id: "48", state: 0, selected: false },
        { member: null, id: "46", state: 0, selected: false },
        { member: null, id: "44", state: 0, selected: false },
        { member: null, id: "42", state: 0, selected: false },
        { member: null, id: "40", state: 0, selected: false },
        { member: null, id: "38", state: 0, selected: false },
        { member: null, id: "36", state: 0, selected: false },
        { member: null, id: "34", state: 0, selected: false },
        {
          member: { id: "-1", name: "记者席" },
          id: "32",
          state: 1,
          selected: false,
        },
        { member: null, id: "30", state: 0, selected: false },
        { member: null, id: "28", state: 0, selected: false },
        { member: null, id: "26", state: 0, selected: false },
        { member: null, id: "24", state: 0, selected: false },
        { member: null, id: "22", state: 0, selected: false },
        { member: null, id: "20", state: 0, selected: false },
        { member: null, id: "18", state: 0, selected: false },
        { member: null, id: "16", state: 0, selected: false },
        { member: null, id: "14", state: 0, selected: false },
        { member: null, id: "12", state: 0, selected: false },
        { member: null, id: "10", state: 0, selected: false },
        {
          member: { id: "-1", name: "记录席" },
          id: "8",
          state: 1,
          selected: false,
        },
        { member: null, id: "6", state: 0, selected: false },
        { member: null, id: "4", state: 0, selected: false },
        { member: null, id: "2", state: 0, selected: false },
      ], // 固定座位
      isSelecting: false, //是否在拖拽
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      selecteCells: [], //选中的座位
      dialogVisible: false, //取消排座弹窗
      reserveSeatVisible: false, //占位弹窗
      cancelPopStyle: {}, //取消排座弹窗样式
      reserveSeatStyle: {}, //占位弹窗样式
      cancelSignSeat: {
        index: null, //取消的座位索引
      }, //取消单个排座座位
      reserveSeatSignSeat: {
        index: null, //占位的座位索引
      }, //占位座位
    };
  },
  mounted() {
    // 获取当前 URL
    const url = new URL(document.location.href);
    const params = new URLSearchParams(url.search);
    // 获取参数值
    const meetingId = params.get("meetingId");
    if (meetingId) {
      this.meetingId = meetingId;
    }
    this.getMemmber();
    this.getRowSeatByMeetingId();
  },
  computed: {
    selectionBoxStyle() {
      const width = Math.abs(this.endX - this.startX);
      const height = Math.abs(this.endY - this.startY);
      const left = Math.min(this.startX, this.endX);
      const top = Math.min(this.startY, this.endY);

      return {
        width: `${width}px`,
        height: `${height}px`,
        left: `${left}px`,
        top: `${top}px`,
        position: "fixed",
        border: "1px dashed #000",
        backgroundColor: "rgba(0, 0, 255, 0.2)",
        pointerEvents: "none",
      };
    },
  },watch: {
    seatData: {
      handler(newVal) {
        if(newVal.findIndex((item) => item.selected == true) != -1){
          return
        }
        let result = [];
        newVal.forEach((item,index) => {
            if(item.member && item.member.id){
              console.log('index',index)
                this.members.forEach((department, departmentIndex) => {
                const memberIndex = department.memberList.findIndex(member => member.id == item.member.id);
                console.log('memberIndex',memberIndex)
                if (memberIndex !== -1) {
                    result.push({ departmentIndex, memberIndex });
                }
              });
            }
        })
        this.members.forEach((item,departmentIndex) => {
          item.memberList.forEach((member, memberIndex) => {
            this.members[departmentIndex].memberList[memberIndex].disabled = false;
          });
        })
        result.forEach((item) => {
          this.members[item.departmentIndex].memberList[item.memberIndex].disabled = true
        })
        this.treeKey += 1;
      },
      deep: true,
    },
  },
  methods: {
    // 座位全选
    sellectAll(){
      this.sellectAllSeat = true;
      console.log('座位全选')
        this.seatData.forEach((item,index) => {
          if(item.state == 0 && item.id != ''){
            item.selected = 1;
            this.selecteCells.push(item)
          }
        })
    },
    //右键单个座位选择
    selecteCell(e, index, item) {
      this.cancelSignSeat.index = index;
      console.log(e, index, item);
      this.dialogVisible = true;
      this.cancelPopStyle = {
        top: `${e.clientY - 50}px`,
        left: `${e.clientX - 30}px`,
      };
    },
    // 右键占位选择
    reserveSeat(e, index, item) {
      console.log("占位");
      this.reserveSeatSignSeat.index = index;
      this.reserveSeatVisible = true;
      this.reserveSeatStyle = {
        top: `${e.clientY - 50}px`,
        left: `${e.clientX - 30}px`,
      };
    },
    //确定取消排座
    comfirmClick() {
      this.dialogVisible = false;
      this.seatData[this.cancelSignSeat.index].state = 0;
      this.seatData[this.cancelSignSeat.index].member = null;
    },
    // 确定占位
    reserveSeatcomfirmClick() {
      console.log("占位确定");
      this.reserveSeatVisible = false;
        this.seatData[this.reserveSeatSignSeat.index].state = 1;
        this.seatData[this.reserveSeatSignSeat.index].member = {
          name: "已占座",
        };
    },
     // 保存图片
    saveAsImage() {
      console.log("保存图片");
      const element = this.$refs.main; // 获取要保存的元素
      html2canvas(element)
      .then((canvas) => {
        const dataURL = canvas.toDataURL("image/png"); // 将 canvas 转换为图片 URL

        if (window.navigator.msSaveBlob) {
          // IE 处理
          const byteString = atob(dataURL.split(",")[1]);
          const mimeString = dataURL.split(",")[0].split(":")[1].split(";")[0];
          const ab = new ArrayBuffer(byteString.length);
          const ia = new Uint8Array(ab);
          
          for (let i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
          }

          const blob = new Blob([ab], { type: mimeString });
          window.navigator.msSaveBlob(blob, "会议室座位表.png");
        } else {
          // 其他浏览器
          const link = document.createElement("a");
          link.href = dataURL; // 设置链接地址
          link.download = "会议室座位表.png"; // 设置下载的文件名
          link.click(); // 模拟点击链接
        }
      })
      .catch((error) => {
        console.error("生成图片时出错:", error); // 捕获错误
      });
    },
    // 保存座位表
    async saveInfo() {
      console.log("保存座位表", this.seatData);
      if (this.id) {
        await saveOrUpdateRowSeat({
          meetingId: this.meetingId,
          // meetingName: this.meetingTitle,
          rowSeatData: JSON.stringify(this.seatData),
          id: this.id,
          type:this.type,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("保存信息成功");
          } else {
            this.$message.error("保存信息失败");
          }
          console.log("保存座位表res>>>>>>>>>>>>>", res);
        });
      } else {
        await saveOrUpdateRowSeat({
          meetingId: this.meetingId,
          // meetingName: this.meetingTitle,
          rowSeatData: JSON.stringify(this.seatData),
          type:this.type,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("保存信息成功");
          } else {
            this.$message.error("保存信息失败");
          }
          console.log("保存座位表res>>>>>>>>>>>>>", res);
        });
      }
    },
     // 打印
    print(){
        window.print();
    },
     // 多个座位占座
    reserveSeatMore() {
      console.log("占座多个座位", this.selecteCells);
        this.selecteCells.forEach((item) => {
          let index = this.seatData.findIndex((it) => {
            return it.id == item.id;
          });
          this.seatData[index].member = { name: "已占座" };
          this.seatData[index].state = 1
        });
        this.seatData.forEach((item) => {
          item.selected = false;
        });
     this.selecteCells = []
    },
    handleCheckChange(data, checked, indeterminate) {
      let arr = this.$refs.tree.getCheckedNodes();
      this.selectedMember = arr.filter((item) => {
        return !item.memberList;
      });
      console.log(this.selectedMember);
    },
    startSelection(event) {
      event.preventDefault();
      this.isSelecting = true;
      this.startX = event.clientX;
      this.startY = event.clientY;
      this.endX = event.clientX;
      this.endY = event.clientY;

      // Reset selection
      this.seatData.forEach((item) => (item.selected = false));
    },
    updateSelection(event) {
      if (this.isSelecting) {
        this.selecteCells = [];
        this.endX = event.clientX;
        this.endY = event.clientY;
        this.selectSeats();
      }
    },
    endSelection() {
      this.isSelecting = false;
    },
    selectSeats() {
      const selectionRect = {
        left: Math.min(this.startX, this.endX),
        top: Math.min(this.startY, this.endY),
        right: Math.max(this.startX, this.endX),
        bottom: Math.max(this.startY, this.endY),
      };
      this.seatData.forEach((item) => {
        const seatElement = document.getElementById(item.id);
        if (seatElement) {
          const rect = seatElement.getBoundingClientRect();
          if (
            rect.left >= selectionRect.left &&
            rect.right <= selectionRect.right &&
            rect.top >= selectionRect.top &&
            rect.bottom <= selectionRect.bottom &&
            !item.state
          ) {
            item.selected = true;
            this.selecteCells.push(item);
          }else {
              item.selected = false;
            }
        }
      });
    },
    async getMemmber() {
      await getDeptMember({ meetingId: this.meetingId }).then((res) => {
        console.log("报名人员>>>>>>>>>>>>>>>", res);
        if(res.code == 200) {
          this.members = res.data;
        }
      });
    },
     async getRowSeatByMeetingId() {
      await findRowSeatByMeetingId({ meetingId: this.meetingId,type:this.type }).then(
        (res) => {
          console.log("获取会议室排座信息>>>>>>>>>>>>>>>", res);
          if (res.code == 200 && res.data !== []) {
            res.data.type == this.type ? this.seatData = JSON.parse(res.data.rowSeatData) : '';
            // this.meetingTitle = res.data.meetingRoomName;
            if (res.data.id) {
              this.id = res.data.id;
            }
            console.log(
              "获取会议室排座信息this.seatData>>>>>>>>>>>>>>>",
              this.seatData
            );
            
          }
          setTimeout(()=>{
            this.loading = false
          },500)

        }
      );
    },
    // 排座
    rowSeat() {
      this.selecteCells.sort((a, b) => parseInt(a.id) - parseInt(b.id));
      console.log("选中的座位", this.selecteCells);
      let indexArr = [];
      this.selecteCells.forEach((cell) => {
        indexArr.push(
          this.seatData.findIndex((itemCell) => {
            return itemCell.id == cell.id;
          })
        );
      });
      this.selectedMember.forEach((item, index) => {
        if (this.seatData[indexArr[index]]) {
          this.seatData[indexArr[index]].member = item;
          this.seatData[indexArr[index]].state = 1;
          this.seatDataMember.push(item);
        }
      });
      console.log("座位数据", this.seatData);
      // this.members.forEach((dept) => {
      //   dept.memberList = dept.memberList.filter(
      //     (member) => !this.seatDataMember.includes(member)
      //   );
      // });
      this.resetChecked();
      this.seatData.forEach((item) => {
        item.selected = false;
      });
      console.log("选中的人员", this.selectedMember);
      console.log("已排座人员", this.seatDataMember);
      console.log("未排座人员", this.members);
    },
    // 取消排座
    cancelRowSeat() {},
    // 清空树形控件选中数据
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
  },
};
</script>

<style lang="less" scope>
@import "../style/index.less";
#meetingRoomm2 {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  display: flex;
  .reserveSeatlPop,
  .cancelPop {
    padding: 2px 5px;
    width: 100px;
    height: 44px;
    position: fixed;
    z-index: 999;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
    font-size: 12px;
    .title {
      font-size: 12px;
      line-height: 20px;
    }
    .bt1 {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background: #fff;
      border: 1px solid #dcdfe6;
      color: #606266;
      -webkit-appearance: none;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      margin: 0;
      transition: 0.1s;
      font-weight: 500;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      padding: 2px 3px;
      float: right;
      font-size: 12px;
      border-radius: 4px;
    }
    .bt2 {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background-color: #409eff;
      border-color: #409eff;
      color: #fff;
      -webkit-appearance: none;
      text-align: center;
      box-sizing: border-box;
      float: right;
      outline: none;
      margin: 0;
      transition: 0.1s;
      font-weight: 500;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      padding: 2px 3px;
      font-size: 12px;
      border-radius: 4px;
      margin-left: 5px;
    }
  }
  .memberList {
    width: 150px;
    height: 100%;
    position: relative;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    min-width: 150px;
    overflow: auto;
    .title {
      line-height: 40px;
      height: 40px;
      text-align: center;
      font-size: 18px;
    }
    .listTree {
      flex: 1;
    }
  }
  .main {
    flex: 1;
    min-width: 1200px;
    padding: 0 20px;
    .title {
      width: 100%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-size: 28px;
    }
  }
  .operateDiv {
    min-width: 150px;
    position: relative;
    border: 1px solid #ccc;
    padding: 10px;
    .el-input {
      width: 130px;
      input {
        padding: 0 5px;
        height: 36px;
        line-height: 36px;
      }
    }
    .saveAsImage,
    .rowSeat,
    .printInfo,
    .reserveSeatMore,
    .sellectAll,
    .saveInfo {
      // width: 120px;
      text-align: center;
      display: block;
      margin: 5px auto;
      padding: 2px 4px;
      background-color: rgba(167, 167, 190, 0.2);
      border-radius: 6px;
      cursor: pointer;
    }
  }

  .content {
    width: 100%;
    height: 740px;
    border: 1px solid #000;
    display: flex;
    .left {
      flex: 1;
      height: 100%;
      border-right: 1px solid #000;
      display: flex;
      flex-direction: column;
      .left_top {
        flex: 6;
        display: flex;
        flex-wrap: wrap;
      }
      .left_center {
        flex: 1;
        border-bottom: 1px solid #000;
        border-top: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          margin: 0 20px;
        }
      }
      .left_bottom {
        flex: 6;
        display: flex;
        flex-wrap: wrap;
      }
    }
    .right {
      flex: 1;
      height: 100%;
      border-left: 1px solid #000;
      flex: 1;
      height: 100%;
      border-right: 1px solid #000;
      display: flex;
      flex-direction: column;
      .right_top {
        flex: 6;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
      }
      .right_center {
        flex: 1;
        border-bottom: 1px solid #000;
        border-top: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          margin: 0 20px;
        }
      }
      .right_bottom {
        flex: 6;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
      }
    }
    .center {
      flex: 1;
      height: 100%;
      display: flex;
      .aisle {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中（可选） */
        span {
          margin: 50px 0;
        }
      }
      .innerRingBox {
        width: 100%;
        flex: 4;
        border-right: 1px solid #000;
        border-left: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .innerRingBoxTop {
          width: 100%;
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center; /* 垂直居中 */
          justify-content: center; /* 水平居中（可选） */
          .innerRing {
            width: 80%;
            height: 80%;
            border: 1px solid #000;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中（可选） */
            span {
              margin: 50px 0;
            }
          }
        }
        .innerRingBoxBottom {
          width: 100%;
          height: 40px;
          border-top: 1px solid #000;
          line-height: 40px;
          text-align: center;
        }
      }
    }
  }
  .seat {
     display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 16.66666%;
    border: 1px solid #000;
    text-align: center;
    overflow: hidden;
  }
  .selection-box {
    position: absolute;
    border: 1px dashed #000;
    background-color: rgba(0, 0, 255, 0.2);
    pointer-events: none;
  }
  .seat.selected {
    background-color: yellow; /* 选中座位的样式 */
  }
}
</style>
<style  scoped>
 /* 打印样式 */
        @media print {
            body * {
                visibility: hidden;  /* 隐藏所有元素 */
            }
            .main, .main * {
                visibility: visible;  /* 仅显示指定区域 */
            }
            .main {
                position: absolute;   /* 防止其他元素影响打印布局 */
                left: 0;
                top: 0;
            }
        }
</style>

